import { PageContainer } from '@ant-design/pro-layout';

import { ModalForm, ProFormText, ProList } from '@ant-design/pro-components';
import { Button, Form, message, Popconfirm, Space, Tag } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

import { delete_api, get_list_api, post_save_api } from './api/CodeLibrary';
import {
  delete_api as delete_info_api,
  get_list_api as get_list_info_api,
  post_save_api as post_save_info_api,
} from './api/CodeLibraryInfo';
export default function Page() {
  const [listAll, setListAll] = useState<CodeLibraryApi.List[]>([]);
  const [listInfoAll, setListInfoAll] = useState<CodeLibraryInfoApi.List[]>([]);
  const [active, setActive] = useState<string>('');
  const GetListAllRepository = async () => {
    const res = await get_list_api('');
    console.log(res);
    setListAll(res.data);
    if (res.data.length > 0) {
      setActive(res.data[0].id);
    }
  };
  useEffect(() => {
    GetListAllRepository();
  }, []);

  const GetListInfoAllRepository = async () => {
    if (active !== '') {
      const res = await get_list_info_api(active);
      // console.log(res);
      setListInfoAll(res.data);
    }
  };

  useEffect(() => {
    GetListInfoAllRepository();
  }, [active]);

  const [formAdd] = Form.useForm<CodeLibraryApi.Dto>();
  const [formEdit] = Form.useForm<CodeLibraryApi.Dto>();
  const [formInfoAdd] = Form.useForm<CodeLibraryInfoApi.Dto>();
  const [formInfoEdit] = Form.useForm<CodeLibraryInfoApi.Dto>();
  return (
    <PageContainer>
      <div className={styles.page}>
        <div className={styles.left}>
          <ProList<CodeLibraryApi.List>
            headerTitle="键值"
            rowClassName={(row: CodeLibraryApi.List) => {
              return active === row.id ? styles.active : '';
            }}
            toolBarRender={() => {
              return [
                <ModalForm<CodeLibraryApi.Dto>
                  key="add"
                  title="数据字典新增"
                  width={400}
                  trigger={<Button type="primary">新增</Button>}
                  form={formAdd}
                  autoFocusFirstInput
                  modalProps={{
                    destroyOnClose: true,
                    onCancel: () => console.log('run'),
                  }}
                  submitTimeout={2000}
                  onFinish={async (values) => {
                    // console.log(values);
                    const res = await post_save_api(values);

                    if (res.success) {
                      message.success('提交成功');
                      GetListAllRepository();
                    } else {
                      message.error('提交失败');
                    }

                    return res.success;
                  }}
                >
                  <ProFormText
                    rules={[{ required: true, message: '这是必填项' }]}
                    width="md"
                    name="exp"
                    label="名称"
                    placeholder="请输入名称"
                  />
                  <ProFormText
                    rules={[{ required: true, message: '这是必填项' }]}
                    name="fieldName"
                    label="键值"
                    placeholder="请输入键值"
                  />
                </ModalForm>,
              ];
            }}
            onRow={(record: any) => {
              return {
                onClick: () => {
                  // console.log(record.ID);
                  setActive(record.id);
                },
              };
            }}
            rowKey="id"
            dataSource={listAll}
            metas={{
              title: {
                dataIndex: 'exp',
              },
              subTitle: {
                render: (text, row) => {
                  return (
                    <Space size={0}>
                      <Tag color="#409EFF">{row.fieldName}</Tag>
                    </Space>
                  );
                },
              },
              actions: {
                render: (text, row) => [
                  <ModalForm<CodeLibraryApi.Dto>
                    key="edit"
                    title="数据字典编辑"
                    width={400}
                    trigger={
                      <a
                        onClick={() => {
                          formEdit.setFieldsValue(row);
                        }}
                      >
                        编辑
                      </a>
                    }
                    form={formEdit}
                    autoFocusFirstInput
                    modalProps={{
                      forceRender: true,
                      destroyOnClose: true,
                      onCancel: () => console.log('run'),
                    }}
                    submitTimeout={2000}
                    onFinish={async (values) => {
                      console.log(values);
                      values.id = row.id;
                      const res = await post_save_api(values);

                      if (res.success) {
                        message.success('提交成功');
                        GetListAllRepository();
                      } else {
                        message.error('提交失败');
                      }

                      return res.success;
                    }}
                  >
                    <ProFormText
                      rules={[{ required: true, message: '这是必填项' }]}
                      width="md"
                      name="exp"
                      label="名称"
                      placeholder="请输入名称"
                    />
                    <ProFormText
                      rules={[{ required: true, message: '这是必填项' }]}
                      width="md"
                      name="fieldName"
                      label="键值"
                      placeholder="请输入键值"
                    />
                  </ModalForm>,

                  <Popconfirm
                    key="delete"
                    title="删除"
                    description="确认删除此条数据?"
                    onConfirm={async () => {
                      console.log(row.id);
                      const res = await delete_api(row.id);
                      console.log(res);
                      if (res.success) {
                        message.success('删除成功');
                        GetListAllRepository();
                      } else {
                        message.error('删除失败');
                      }
                    }}
                    onCancel={() => {
                      message.error('删除已取消');
                    }}
                    okText="是"
                    cancelText="否"
                  >
                    <a style={{ color: '#F56C6C' }}>删除</a>
                  </Popconfirm>,
                ],
              },
            }}
          />
        </div>
        <div className={styles.right}>
          <ProList<CodeLibraryInfoApi.List>
            headerTitle="详情"
            toolBarRender={() => {
              return [
                <ModalForm<CodeLibraryInfoApi.Dto>
                  key="add"
                  title="详情新增"
                  width={400}
                  trigger={<Button type="primary">新增</Button>}
                  form={formInfoAdd}
                  autoFocusFirstInput
                  modalProps={{
                    destroyOnClose: true,
                    onCancel: () => console.log('run'),
                  }}
                  submitTimeout={2000}
                  onFinish={async (values) => {
                    // console.log(values);
                    values.dictionaryId = active;
                    const res = await post_save_info_api(values);

                    if (res.success) {
                      message.success('提交成功');
                      GetListInfoAllRepository();
                    } else {
                      message.error('提交失败');
                    }

                    return res.success;
                  }}
                >
                  <ProFormText
                    rules={[{ required: true, message: '这是必填项' }]}
                    name="value"
                    label="名称"
                    placeholder="请输入名称"
                  />
                  <ProFormText
                    rules={[{ required: true, message: '这是必填项' }]}
                    name="dictionaryKey"
                    label="键值"
                    placeholder="请输入键值"
                  />
                </ModalForm>,
              ];
            }}
            rowKey="id"
            dataSource={listInfoAll}
            metas={{
              title: {
                dataIndex: 'value',
              },
              subTitle: {
                render: (text, row) => {
                  return (
                    <Space size={0}>
                      <Tag color="default">{row.dictionaryKey}</Tag>
                    </Space>
                  );
                },
              },
              actions: {
                render: (text, row) => [
                  <ModalForm<CodeLibraryInfoApi.Dto>
                    key="edit"
                    title="数据字典编辑"
                    width={400}
                    trigger={
                      <a
                        onClick={() => {
                          formInfoEdit.setFieldsValue(row);
                        }}
                      >
                        编辑
                      </a>
                    }
                    form={formInfoEdit}
                    autoFocusFirstInput
                    modalProps={{
                      forceRender: true,
                      destroyOnClose: true,
                      onCancel: () => console.log('run'),
                    }}
                    submitTimeout={2000}
                    onFinish={async (values) => {
                      values.id = row.id;
                      console.log(values);
                      values.dictionaryId = active;
                      const res = await post_save_info_api(values);

                      if (res.success) {
                        message.success('提交成功');
                        GetListInfoAllRepository();
                      } else {
                        message.error('提交失败');
                      }

                      return res.success;
                    }}
                  >
                    <ProFormText
                      rules={[{ required: true, message: '这是必填项' }]}
                      name="value"
                      label="名称"
                      placeholder="请输入名称"
                    />
                    <ProFormText
                      rules={[{ required: true, message: '这是必填项' }]}
                      name="dictionaryKey"
                      label="键值"
                      placeholder="请输入键值"
                    />
                  </ModalForm>,

                  <Popconfirm
                    key="delete"
                    title="删除"
                    description="确认删除此条数据?"
                    onConfirm={async () => {
                      console.log(row.id);
                      const res = await delete_info_api(row.id);
                      if (res.success) {
                        message.success('删除成功');
                        GetListInfoAllRepository();
                      } else {
                        message.error('删除失败');
                      }
                    }}
                    onCancel={() => {
                      message.error('删除已取消');
                    }}
                    okText="是"
                    cancelText="否"
                  >
                    <a style={{ color: '#F56C6C' }}>删除</a>
                  </Popconfirm>,
                ],
              },
            }}
          />
        </div>
      </div>
    </PageContainer>
  );
}
